<template>
    <div>
<AttendanceHeader :profile-name="msg" :profile-image-url="url" :dayInfo="timeinfo"></AttendanceHeader>
        
        <div class="rest-record-items">
            <ul class="clear">
                <li>
                    <em>2</em>
                    <span>调休次数</span>
                </li>
                <li>
                    <em class="red">2.5</em>
                    <span>已调休(小时)</span>
                </li>
            </ul>
        </div>
        <div class="rest-record-content">
            <div class="rest-items">
                <div class="timeStamp">
                    <span class="day">28
                        <em>9</em>
                    </span>
                    <span class="week">星期一</span>
                </div>
                <div class="clear">
                    <div class="usetime fl">0.5小时</div>
                    <ul class="fl">
                        <li class="clear">
                            <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                            <span>查看调休申请单&nbsp;></span>
                        </li>
                        <li class="clear">
                            <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                            <span>查看调休申请单&nbsp;></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="rest-items">
                <div class="timeStamp">
                    <span class="day">28
                        <em>9</em>
                    </span>
                    <span class="week">星期一</span>
                </div>
                <div class="clear">
                    <div class="usetime fl">1小时</div>
                    <ul class="fl">
                        <li class="clear">
                            <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                            <span>查看调休申请单&nbsp;></span>
                        </li>
                        <li class="clear">
                            <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                            <span>查看调休申请单&nbsp;></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="rest-items">
                <div class="timeStamp">
                    <span class="day">28
                        <em>9</em>
                    </span>
                    <span class="week">星期一</span>
                </div>
                <div class="clear">
                    <div class="usetime fl">1小时</div>
                    <ul class="fl">
                        <li class="clear">
                            <!-- 跨自然日换休 -->
                            <p class="during">09-22&nbsp;16:30～09-23&nbsp;17:30</p>
                            <span>查看调休申请单&nbsp;></span>
                        </li>
                        <li class="clear">
                            <p class="during">09-22&nbsp;16:30～09-22&nbsp;17:30</p>
                            <span>查看调休申请单&nbsp;></span>
                        </li>
                    </ul>
                </div>
            </div>
            <p v-for="x in 50 " :key="x">{{x}}</p>
        </div>
    </div>
</template>

<script>
import AttendanceHeader from "../component/header.vue";
export default {
  name: "r--profile--details",
  components: {
    AttendanceHeader
  },
  data() {
    return {
      msg: "hzz",
      url: "http://owtz12sxf.bkt.clouddn.com/01.jpg",
      timeinfo: "2017-13",
      allAttendance: 17,
      lateCount: 1,
      missCard: 2,
      outerAttendance: 3,
      AttendancePercentage: 80
    };
  }
};
</script>